import React, { useState } from 'react';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import Link from '@material-ui/core/Link';
import Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import { RegisterApi } from '../../request/api'
import MuiAlert from '@material-ui/lab/Alert';
import { useHistory } from 'react-router-dom'

function Alert(props) {
    return <MuiAlert elevation={6} variant="filled" {...props} />;
}

function Copyright() {
    return (
        <Typography variant="body2" color="textSecondary" align="center">
            {'Copyright © '}
            <Link color="inherit" href="http://codesohigh.com">
                你单排吧
            </Link>
            {' '}
            {new Date().getFullYear()}
            {'.'}
        </Typography>
    );
}

const useStyles = makeStyles((theme) => ({
    paper: {
        marginTop: theme.spacing(8),
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        fontSize: '24px'
    },
    avatar: {
        margin: theme.spacing(1),
        backgroundColor: theme.palette.secondary.main,
    },
    form: {
        width: '100%', // Fix IE 11 issue.
        marginTop: theme.spacing(1),
    },
    submit: {
        margin: theme.spacing(3, 0, 2),
    },
}));

export default function Register() {
    // 添加了这段，强行设置html字体大小
    // let fz = document.querySelector('html').style.fontSize;
    document.querySelector('html').style.fontSize = "24px";

    const classes = useStyles();
    // 成功提示
    const [openSuccess, setOpenSuccess] = useState(false);
    // 失败提示
    const [openError, setOpenError] = useState(false);
    // 失败提示信息
    const [errorMsg, setErrorMsg] = useState("");
    // 获取路由
    const history = useHistory()

    // 点击了登录
    function submitFn() {
        RegisterApi({
            phone: document.getElementById('username').value,
            password: document.getElementById('password').value
        }).then(res => {
            if (res.errCode === 0) {
                // 成功
                setOpenSuccess(true);
                // 2秒后跳转到上一页
                setTimeout(() => {
                    setOpenSuccess(false);
                    // 设置字体
                    // document.querySelector('html').style.fontSize = fz;
                    // 跳回上一页
                    history.go(-1);
                }, 2000)
            }
        }).catch(err => {
            setOpenError(true);
            if (err.response.data.errCode === 1003) {
                setErrorMsg(err.response.data.data[0]);
            } else {
                setErrorMsg(err.response.data.message);
            }
            setTimeout(() => {
                setOpenError(false);
            }, 2000)
        })
    }

    return (
        <Container component="main" maxWidth="xs">
            <CssBaseline />
            <div className={classes.paper}>
                <Avatar className={classes.avatar}>
                    <LockOutlinedIcon />
                </Avatar>
                <Typography component="h1" variant="h5">Login Up</Typography>
                <form className={classes.form} noValidate>
                    <TextField
                        variant="outlined"
                        margin="normal"
                        required
                        fullWidth
                        id="username"
                        label="用户名"
                        name="username"
                        autoComplete="username"
                        autoFocus
                        defaultValue=""
                    />
                    <TextField
                        variant="outlined"
                        margin="normal"
                        required
                        fullWidth
                        name="password"
                        label="密码"
                        type="password"
                        id="password"
                        autoComplete="password"
                        defaultValue="wolfcode123"
                    />
                    <Button
                        type="button"
                        fullWidth
                        variant="contained"
                        color="primary"
                        className={classes.submit}
                        onClick={submitFn}
                    >立即注册</Button>
                    <Grid container>
                        <Grid item xs>
                            <Link href="/login" variant="body2">返回登录</Link>
                        </Grid>
                    </Grid>
                </form>
            </div>
            <Box mt={8}>
                <Copyright />
            </Box>
            <Alert className="login_alert" style={{ display: openSuccess ? 'flex' : 'none' }} severity="success">注册成功，返回登录页</Alert>
            <Alert className="login_alert" style={{ display: openError ? 'flex' : 'none' }} severity="error">{errorMsg}</Alert>
        </Container>
    );
}